<template>
  <t-layout class="overflow-hidden">
    <t-aside class="w-max!">
      <rx-menu :collapsed="collapsed" />
    </t-aside>
    <t-layout>
      <t-header>
        <rx-header v-model:collapsed="collapsed" />
      </t-header>
      <rx-navs :collapsed="collapsed" />
      <div class="rx-layout-content" :style="{ width: `calc(100vw - ${collapsedWidth}px)` }">
        <t-config-provider :global-config="globalConfig">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <keep-alive :include="useTabView.getCacheViews">
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </t-config-provider>
      </div>
      <!--   todo 这边后面看看要不要有这个脚标   -->
      <!--      <t-footer>Footer</t-footer>-->
    </t-layout>
  </t-layout>
</template>

<script setup lang="ts">
import RxHeader from '@/layouts/components/RxHeader.vue';
import RxMenu from '@/layouts/components/RxMenu.vue';
import RxNavs from '@/layouts/components/RxNavs.vue';
import { useTabViewStore } from '@/store/modules/tabView.ts';
const useTabView = useTabViewStore();
/**
 * =======================系统全局配置 =====================
 */
import settings from './settings.ts';
import enConfig from 'tdesign-vue-next/es/locale/zh_CN';
import { merge } from 'lodash';
const globalConfig = merge(enConfig, settings);
/**
 *  ======================================================
 */

// 是否展开菜单
const collapsed = ref(false);
const collapsedWidth = ref(232);

watch(
  [() => collapsed.value],
  () => {
    collapsedWidth.value = collapsed.value ? 64 : 232;
  },
  {
    immediate: true,
  },
);

// 监听屏幕尺寸变化决定是否要折叠菜单展示
onMounted(() => {
  window.onresize = () => {
    collapsed.value = document.body.clientWidth < 1200;
  };
});
</script>
